<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="参会报名" back></Header>
		<view class="wapper">
			<!-- 轮播图 -->
			<view class="banner">
				<u-swiper :list="bannerList" height="197" mode="dot"></u-swiper>
			</view>
			<!-- form -->
			<view class="form">
				<u-form :model="form" label-position="top" label-width="180" ref="uForm" :label-style="labelStyle">
					<u-row>
						<u-col :span="8">
							<u-form-item label="参会单位(企业)名称" prop="CompanyName" required>
								<u-input :custom-style="inputStyle" v-model="form.CompanyName"
									placeholder="参会单位(企业)名称"></u-input>
							</u-form-item>
						</u-col><u-col :span="4">
							<u-form-item label="参会人数">
								<u-input type="number" :custom-style="inputStyle" @change="changeNumber"
									placeholder="参会人数"></u-input>
							</u-form-item>
						</u-col>

					</u-row>
					<u-row v-for="(v,k) in personList" :key="k">
						<u-col :span="4">
							<u-form-item label="姓名">
								<u-input :custom-style="inputStyle" v-model="v.name" placeholder="姓名"></u-input>
							</u-form-item>
						</u-col>
						<u-col :span="4">
							<u-form-item label="职务">
								<u-input :custom-style="inputStyle" v-model="v.job" placeholder="职务"></u-input>
							</u-form-item>
						</u-col>
						<u-col :span="4">
							<u-form-item label="联系电话" :rules="[ {
						pattern: /^1[3456789]\d{9}$/,
						message: '请输入正确手机号',
						trigger: ['change', 'blur']
					}]">
								<u-input :custom-style="inputStyle" maxlength="11" type="number" v-model="v.phone"
									placeholder="电话"></u-input>
							</u-form-item>
						</u-col>

					</u-row>
				</u-form>
				<view class="title" style="margin: 20rpx 0;letter-spacing: 2px;
    font-size: 16px;
    font-weight: 400;
    color: rgb(51, 51, 51);">
					会议日程
				</view>
				<view class="" style="width: 150rpx;margin: 20rpx 0;">
					<u-button style="background-color:#0ed390;color:#fff ;" size="small" @click="checkAll">全选</u-button>
				</view>
				<view class="check-wapper">
					<view class="check-item" v-for="(item, index) in list" :key="index">
						<view class="date">
							{{item.DateString}}
						</view>
						<u-checkbox-group v-model="checkboxVal" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(v, k) in item.HuiyiList"
								:key="index" :label="v.HuiyiName" :name="v.HuiyiID">
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<u-button class="ubtn" @click="submit" :loading="loading"
					style="background-color:#0ed390;color:#fff ;">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				bannerList: [
					banner1
				],
				checkboxVal: [],
				labelStyle: {
					'letter-spacing': '4rpx',
					'font-size': '32rpx',
					'font-weight': 400,
					'color': '#333333',
				},
				inputStyle: {
					backgroundColor: '#fff'
				},
				personList: [{
					name: '',
					job: '',
					phone: ''
				}],
				list: [],
				number: 1,
				form: {
					CompanyName: '',
					PersonInfo: ''
				},
				loading: false,
				rules: {
					CompanyName: [{
						required: true,
						message: '请输入公司名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// PersonName: [{
					// 	required: true,
					// 	message: '请输入姓名',
					// 	// 可以单个或者同时写两个触发验证方式 
					// 	trigger: ['change', 'blur'],
					// }],
					// PhoneNumber: [{
					// 	required: true,
					// 	message: '请输入手机号码',
					// 	// 可以单个或者同时写两个触发验证方式 
					// 	trigger: ['change', 'blur'],
					// }, {
					// 	pattern: /^1[3456789]\d{9}$/,
					// 	message: '请输入正确手机号',
					// 	trigger: ['change', 'blur']
					// }],
				}
			}
		},
		methods: {
			checkAll() {
				if (this.checkboxVal.length == this.list.length) {
					this.checkboxVal = []
				} else {
					this.checkboxVal = []
					this.list.map((v) => {
						v.HuiyiList.map((s) => {
							this.checkboxVal.push(s.HuiyiID)
						})
					})
				}
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.checkboxVal = e
			},
			changeNumber(e) {
				if (!e) return
				console.log(e)
				console.log(this.number)
				if (this.number < e) {
					for (let i = this.number; i < e; i++) {
						let obj = {
							name: '',
							job: '',
							phone: ''
						}
						this.personList.push(obj)

					}
				} else {
					this.personList.splice(e, this.number - e)
				}
				this.number = e

			},
			async submit() {
				this.loading = true
				try {
					let valid = await this.$refs.uForm.validate()
					if (valid) {
						if (this.checkboxVal.length == 0) {
							uni.$u.toast('请选择会议')
							this.loading = false
							return
						}
						let res = await this.$api.submitInfo2({
							...this.form,
							PersonInfo: this.makeInfo(this.personList),
							HuiyiIDs: this.checkboxVal.join(';')
						})
						if (res.Status == 0) {
							uni.$u.toast('报名成功!')
							setTimeout(() => {
								this.$router.go(0)
							}, 1000)
						}
					}
					this.loading = false
				} catch (e) {
					//TODO handle the exception
					this.loading = false
				}
			},
			makeInfo(arr) {
				let list = []
				for (let x of arr) {
					let strArr = []
					for (let i in x) {
						strArr.push(x[i])
					}
					let str = strArr.join(',')
					list.push(str)
				}
				return list.join(';')
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom

		},
		async mounted() {
			let res = await this.$api.getMeting()
			this.checkboxVal = []
			console.log(res.UserData)
			this.list = res.UserData.map((v) => {
				// v.HuiyiList.map((s) => {
				// 	this.checkboxVal.push(s.HuiyiID)
				// })
				return v
			})
		}
	}
</script>
<style>
	u-row {
		width: 100% !important;
	}
</style>
<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		background: #f2f2f2;

		.wapper {
			flex: 1;
			z-index: 100;
			margin-top: -280rpx;
			padding-bottom: 80rpx;

			.banner {
				border-top-left-radius: 60rpx;
				border-top-right-radius: 60rpx;
				overflow: hidden;
			}

			.form {
				padding: 20rpx 40rpx;
			}

			.ubtn {
				margin-top: 50rpx;
			}
			
			.check-item {
				.date {
					letter-spacing: 2px;
					font-size: 16px;
					font-weight: 400;
					color: rgb(51, 51, 51);
					margin: 10rpx 0;
				}
			}
		}
	}
</style>